<template>
	<zh-drawer :zIndex="props.zIndex" :disabbleScroll="true" ref="drawer" :round="props.round" :height="dHeight" :closeable="true"
		placement="bottom" @close="close" @open="open" title="请选择" ok-text="确认" @cancel="cancel" @ok="onOk"
		:okColor="_color" :show="_show">
		<template #title v-if="props.model === 'datetime'">
			<view class="flex-row-center-start">
				<zh-text _class="mr-20" v-if="!_strvalue" @tap="onDateClick"
					:color="showType === 'date' ? _color : ''">请选择日期</zh-text>
				<zh-text _class="mr-20" v-if="_strvalue" @tap="onDateClick"
					:color="showType === 'date' ? _color : ''">{{ _strvalue }}</zh-text>
				<zh-text v-if="!_timeStrvalue" @tap="onTimeClick"
					:color="showType === 'time' ? _color : ''">请选择时间</zh-text>
				<zh-text v-if="_timeStrvalue" :color="showType === 'time' ? _color : ''"
					@tap="onTimeClick">{{ _timeStrvalue }}</zh-text>
			</view>
		</template>
		<view class="mx-16 mt-10">
			<zh-calendar-view ref="calendarView" v-if="showType === 'date'" :height="dHeight-(store.orientation === 'landscape'?140:200)"
				:multiple="props.model === 'datetime' ? false : props.multiple" v-model="_value" :defaultValue="_value"
				:model="dateModel" :color="_color" :linear="props.linear" :linearDeep="props.linearDeep"
				:start="props.start" :end="props.end" :disabledDate="props.disabledDate" :dateStyle="props.dateStyle"
				:max="props.max" :hideButton="true" @click="onclick"></zh-calendar-view>
			<zh-time-view v-if="showType === 'time'" :height="dHeight-(store.orientation === 'landscape'?140:200)" v-model="_timeValue"
				v-model:model-str="_timeStrvalue" :default-value="_timeValue" @change="change"
				:disabledDate="props.disabledDate" :format="props.format ? props.format : 'YYYY-MM-DD HH:mm:ss'"
				:showFormat="props.showTimeFormat" :showDetail="_showDetail" :showSuffix="props.showSuffix"
				:start="DayJs(_timeValue).hour(0).minute(0).second(0).format()"
				:end="DayJs(_timeValue).hour(23).minute(59).second(59).format()"
				:immediateChange="props.immediateChange"></zh-time-view>
		</view>
		<zh-button label="确认选择" :height="64" block :margin="[32, 12]" :color="_color" :linear="props.linear"
			:linear-deep="props.linearDeep" @click="onOk" :round="props.btnRound"> </zh-button>
		<view :style="{ height: sysinfo.bottomSafe + 'px' }"></view>
	</zh-drawer>
</template>
<script lang="ts" setup>
	/**
 * 日历(弹层式)
 * @description 用法见：zh-calendar-view组件，与其一致的用法。
 */
	import { inject, computed, ref, watch, PropType, onMounted } from 'vue';
	import { custom_props } from '@/tool/lib/minxs';
	import { dateItemStyle } from '../zh-calendar-view/interface';
	import * as dayjs from 'dayjs/esm/index';
	import { useWindowInfo } from '@/tool/useFun/useWindowInfo'
	import systemConfigStore from '@/store/modules/systemConfigStore';
	const store = systemConfigStore();
	const DayJs = dayjs.default;
	const drawer = ref<any>(null);
	const calendarView = ref<any>(null);

	/**
	 * 事件说明
	 * v-model 绑定当前的时间。
	 * confirm 当点击确认时触发
	 * click 日期被选中时触发，注意禁用的日期不会触发 。
	 * change 当切换年或者月的时候触发。
	 */
	const emits = defineEmits(['update:modelValue', 'update:modelStr', 'update:show', 'confirm', 'click', 'change', 'cancel', 'close', 'open']);

	const props = defineProps({
		...custom_props,
		immediateChange: {
			type: Boolean,
			default: false,
		},
		zIndex: {
			type: [Number, String],
			default: 999,
		},
		show: {
			type: Boolean,
			default: false,
		},
		//显示日期格式
		showFormat: {
			type: String,
			default: '',
		},
		//绑定的日期格式
		format: {
			type: String,
			default: '',
		},
		/**
		 * 数组
		 */
		defaultValue: {
			type: [String, Number, Date, Array as PropType<Array<String | Number | Date>>],
			default: () => [],
		},
		modelValue: {
			type: [String, Number, Date, Array as PropType<Array<String | Number | Date>>],
			default: () => [],
		},
		//单向绑定输入展示日期，此字段用来在页面上展示。只向外输出。
		//功能目的：用来在页面上显示，特别是在input上绑定显示非常方便。
		//标准数据保存时，请使用modelValue保存，而不是此值。
		modelStr: {
			type: String,
			default: '',
		},
		/**
		 * 日期模式
		 * day : 单个日期选择模式（可多选，需要设置multiple=true;
		 * week :按周选择模式。
		 * month :按月选择模式。
		 * year :按年选择模式。
		 * rang :按日期范围选择模式。
		 * dateTime:日期+时间
		 * time:时间
		 */
		model: {
			type: String as PropType<'quarter' | 'day' | 'month' | 'year' | 'rang' | 'week' | 'dateTime' | 'time'>,
			default: 'day',
		},
		color: {
			type: String,
			default: 'primary',
		},
		linear: {
			type: String,
			default: '',
		},
		linearDeep: {
			type: String,
			default: 'light',
		},
		//指的是：有效的可选时间，小于此时间，不允许选中。
		start: {
			type: [String, Number, Date],
			default: '',
		},
		//指的是：有效的可选时间，大于此时间，不允许选中。
		end: {
			type: [String, Number, Date],
			default: '',
		},

		/** 日历组件属性 */

		//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
		//被禁用的日期将无法选中。
		disabledDate: {
			type: Array as PropType<Array<String | Number | Date>>,
			default: () => [],
		},
		//是否允许多选。
		multiple: {
			type: Boolean,
			default: false,
		},
		//设定单个日期的样式。
		dateStyle: {
			type: Array as PropType<Array<dateItemStyle>>,
			default: () => [],
		},
		height: {
			type: Number,
			default: 950
		},
		//当multiple=true时，可以选择的最大日期数量。
		max: {
			type: Number,
			default: 999,
		},
		/** 日历组件属性结束 */
		round: {
			type: Number,
			default: 3,
		},
		//隐藏头部操作栏
		hideTool: {
			type: Boolean,
			default: false,
		},
		//显示日期时间格式是日期格式
		showDateFormat: {
			type: String,
			default: 'YYYY年MM月DD日',
		},
		//显示日期时间格式是时间格式
		showTimeFormat: {
			type: String,
			default: 'HH:mm:ss',
		},
		//需要展现的时间格式类型
		showDetail: {
			type: Object as PropType<any>,
			default: () => {
				return {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true,
				};
			},
		},
		//日期的后缀，
		showSuffix: {
			type: Object,
			default: () => {
				return {
					year: '年',
					month: '月',
					day: '日',
					hour: '时',
					minute: '分',
					second: '秒',
				};
			},
		},
	});
	const showType = ref('date');
	const aniover = ref(true);
	const sysinfo = useWindowInfo()
	const _show = ref(props.show);
	const _value = ref<any>([]);
	const _timeValue = ref();
	const _strvalue = ref('');
	const _timeStrvalue = ref('');
	const clickValue = ref();
	const dateModel = ref(props.model);
	const _modelType = computed(() => props.model);
	const _showDetail = computed(() =>
		Object.assign(
			{
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true,
			},
			props.showDetail,
			{ year: false, month: false, day: false }
		)
	);
	function onDateClick() {
		showType.value = 'date';
	}
	function onTimeClick() {
		showType.value = 'time';
	}
	function cancel() {
		close();
	}
	function close() {
		emits('cancel');
		emits('update:show', false);
		_show.value = false;
	}
	function open() {
		showType.value = 'date';
		emits('open');
		emits('update:show', true);
		_show.value = true;
	}
	//是否聚焦中。
	const _color = computed(() => {
		let color = props.color;
		if (props.followTheme && store.color) {
			color = store.color;
		}
		return color;
	});
	const setValue = () => {
		if (props.modelValue && props.modelValue.length > 0) {
			if (props.model === 'datetime') {
				let list = [];
				list.push(DayJs(props.modelValue).format('YYYY-MM-DD'));
				_timeValue.value = props.modelValue;
				_value.value = list;
				_strvalue.value = DayJs(props.modelValue).format(props.showDateFormat ? props.showDateFormat : 'YYYY年MM月DD日');
				_timeStrvalue.value = DayJs(props.modelValue).format(props.showTimeFormat ? props.showTimeFormat : 'HH:mm:ss');
			} else {
				if (Array.isArray(props.modelValue)) {
					_value.value = props.modelValue;
				} else {
					let list = [];
					list.push(props.modelValue);
					_value.value = list;
				}
			}
		} else {
			if (props.model === 'datetime') {
				dateModel.value = 'day';
			}
			_value.value = [];
			_timeValue.value = undefined;
			_strvalue.value = '';
			_timeStrvalue.value = '';
			showType.value = 'date';
		}
	};
	watch(
		() => props.show,
		() => {
			if (_show.value == props.show) return;

			if (drawer.value) {
				if (props.show) {
					drawer.value?.open();
					setValue();
				} else {
					drawer.value?.close();
				}
			}
		}
	);
	onMounted(() => {
		setValue();
	});
	watch(
		() => props.modelValue,
		() => {
			setValue();
		},
		{ deep: true }
	);
	function change(e : Array<string | number>) {
		emits('change', e);
	}
	function onclick(e : Array<string | number>) {
		if (props.model === 'datetime') {
			_strvalue.value = DayJs(e).format(props.showDateFormat ? props.showDateFormat : 'YYYY年MM月DD日');
			_timeValue.value = e;
			showType.value = 'time';
		}
		emits('click', e);
	}
	function onOk() {
		if (props.model === 'datetime') {
			if (_timeValue.value) {
				let str = DayJs(_timeValue.value).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日 HH:mm:ss');
				emits('update:modelValue', _timeValue.value);
				emits('update:modelStr', str);
				emits('confirm', _timeValue.value, str);
			} else {
				emits('update:modelValue', '');
				emits('update:modelStr', '');
				emits('confirm', '', '');
			}
		} else {
			let value = calendarView.value.getValue();
			let strvalue = '';
			let valueList = [];
			if (value && value.length > 0) {
				let strList = value.map((item : any) => {
					return DayJs(item).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日');
				});
				if (props.multiple) {
					strvalue = strList.join(',');
				} else {
					strvalue = strList.join('~');
				}
				valueList = value.map((item : any) => {
					return DayJs(item).format(props.format ? props.format : 'YYYY-MM-DD');
				});
			}

			emits('update:modelValue', valueList);
			emits('update:modelStr', strvalue);
			emits('confirm', valueList, strvalue);
		}

		drawer.value?.close();
	}
	const dHeight = computed(() => {
		return props.height + sysinfo.bottomSafe;
	});
</script>